<template>
    <div class="newsinfo-container">
        <!-- 标题 -->
        <h3 class="title">{{ newsinfo.name }}</h3>
        <!-- 子标题 -->
        <p class="subtitle">
            <span> 这是发表时间：{{ newsinfo.date }}</span>
            <span> 点击：{{ newsinfo.count }}次</span>
            
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <!-- <div class="thumbs"> 版本太低不适用
             <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src"> 
        </div> -->
        <div class="thumbs">
            <vue-preview :slides="list" @close="handleClose" >
            </vue-preview>
        </div>

        <!-- 图片内容区域 -->
        <div class="content" v-html="newsinfo.content">
        </div>

        <hr>
        <!-- 评论 子组件-->
        <comment-box :id="this.id"></comment-box>
        
    </div>
</template>

<script>
// 导入 评论 子组件
import comment from '../subcomponents/comment.vue'
export default {
    data(){
        return {
            id: this.$route.params.id, // 将 url 中的 id 获取到
            newsinfo: {},
            list: [] //缩略图数组
        }
    },
    methods:{
        handleClose() {
        console.log("close event");
        },
        getsltList(){  // mscr，w, h 必不可少
                if(this.id == '1'){
                    this.list = [{
                        src: '../../images/0.jpg',
                        msrc: '../../images/0.jpg',
                        w: 600,
                        h: 400

                    }, {
                        src: '../../images/4.png',
                        msrc: '../../images/4.png',
                        w: 600,
                        h: 400
                    }, {
                        src: '../../images/5.jpg',
                        msrc: '../../images/5.jpg',
                        w: 600,
                        h: 400
                    }, {
                        src: '../../images/6.jpg',
                        msrc: '../../images/6.jpg',
                        w: 600,
                        h: 400
                    }, ]
                }else  if(this.id == '2'){
                    this.list = [{
                        src: '../../images/1.gif',
                        msrc: '../../images/1.gif',
                        w: 600,
                        h: 400
                    }, {
                        src: '../../images/2.gif',
                        msrc: '../../images/2.gif',
                        w: 600,
                        h: 400
                    }, {
                        src: '../../images/3.gif',
                        msrc: '../../images/3.gif',
                        w: 600,
                        h: 400
                    },  ]
                }else  if(this.id == '3'){
                    this.list = [{
                        src: '../../images/20.jpg',
                        msrc: '../../images/20.jpg',
                        w: 600,
                        h: 400
                    }, {
                        src: '../../images/21.jpg',
                        msrc: '../../images/21.jpg',
                        w: 600,
                        h: 400
                    }, {
                        src: '../../images/23.jpg',
                        msrc: '../../images/23.jpg',
                        w: 600,
                        h: 400
                    },  ]
                }

        },
        getNewsInfo(){
            var list = [
                { id:'1', name: '健身卡尽快', date: '2019-09-08', count: '41', img: '../../images/11.jpg', content: ' <p>幸福往往离我们遥远，当拥有了，不会一辈子，只是短暂的一瞬间。</p><img src="../../images/18.jpg">' },
                { id:'2', name: '的就撒开附件是的回复', date: '2019-09-09', count: '2', img: '../../images/12.jpg', content: '<img src="../../images/18.jpg"><p>还记得发货计划的伤口恢复数据</p><img src="../../images/20.jpg">'},
                { id:'3', name: '是积分卡', date: '2019-09-10', count: '3', img: '../../images/13.jpg', content: ' <p>幸福往往离我们遥远，当拥有了，不会一辈子，只是短暂的一瞬间。</p><p>幸福时好像全世界都在舞动，当幸福离去好像全世界都沉沦在悲伤里。<p>在一起时，很幸福。<p>相遇时，很幸福。<p>相爱时，很幸福。　<p>玩耍时，很幸福。<p>互相陪伴时，很幸福。　<p>牵手时，很幸福。<p>相拥时，很幸福。　<p>热吻时，很幸福。<p>可这能会停留多少时间？当那瞬间流逝，不得不放开。　　<p>彼此许下诺言说我们会一辈子在一起，我们一辈子都要很幸福。　<p>可是那份幸福又能坚持多久？分离了还有什么幸福可言。<p>人类的自私创就后悔的分离，人类的贪欲创就悔恨的分离，人类的不珍惜创就痛心的分离，人类的花心创就无法挽留的分离。748219美文网　<p>一切一切是上天注定，还是自己本身的缘故？　<p>分离了，躲在角落哭泣。<p>幸福了，像全世界宣布我是最幸福的人。<p>有谁真的能保证彼此能永远在一起，不吵不闹，平平淡淡的幸福永远。　<p>嘴可以说出任何话，但是你的话是否能做到？　<p>热恋时，甜言蜜语取悦对方的心。　　<p>分离时，狠心的话语去逃避这一切。　<p>看透了，却不想看透了。　　<p>当一个人看透一切事物，跟植物人又有何区别。　　<p>当看透了，生命却变得乏味，无趣。<p>每个人都想要幸福，最后把自己弄的伤痕累累身心疲惫，这何必。<p>一个人试着去释怀并不是一件坏事，顺其自然是最好的。是自己的一辈子躲不掉，不属于自己的就算付出生命也不是自己的。强求的幸福，只是会一瞬间，当离去，才会懂得痛彻心扉。当一个人深爱爱你，你已经很幸福了，只是看你是否懂得珍惜。</p><p>当一个人珍惜你，你已经很幸福了，只是看你是否懂得这份珍惜。人常常在失去后，才懂得珍惜。自己把自己伤的遍体鳞伤，而不是时间，而不是现实。幸福时刻，一辈子难忘。当那份幸福远离，脑海出现那些曾经拥有的幸福，泪不停滑落，这是人一生最痛苦，最难忘的。幸福一瞬间，而痛苦却是一辈子。人的悲哀，全来自于自己，怪不得他人他事。</p>'},
                { id:'4', name: '飞机萨科', date: '2019-09-10', count: '32', img: '../../images/14.jpg', content: ' <p>幸福往往离我们遥远，当拥有了，不会一辈子，只是短暂的一瞬间。</p><p>幸福时好像全世界都在舞动，当幸福离去好像全世界都沉沦在悲伤里。<p>在一起时，很幸福。<p>相遇时，很幸福。<p>相爱时，很幸福。　<p>玩耍时，很幸福。<p>互相陪伴时，很幸福。　<p>牵手时，很幸福。<p>相拥时，很幸福。　<p>热吻时，很幸福。<p>可这能会停留多少时间？当那瞬间流逝，不得不放开。　　<p>彼此许下诺言说我们会一辈子在一起，我们一辈子都要很幸福。　<p>可是那份幸福又能坚持多久？分离了还有什么幸福可言。<p>人类的自私创就后悔的分离，人类的贪欲创就悔恨的分离，人类的不珍惜创就痛心的分离，人类的花心创就无法挽留的分离。748219美文网　<p>一切一切是上天注定，还是自己本身的缘故？　<p>分离了，躲在角落哭泣。<p>幸福了，像全世界宣布我是最幸福的人。<p>有谁真的能保证彼此能永远在一起，不吵不闹，平平淡淡的幸福永远。　<p>嘴可以说出任何话，但是你的话是否能做到？　<p>热恋时，甜言蜜语取悦对方的心。　　<p>分离时，狠心的话语去逃避这一切。　<p>看透了，却不想看透了。　　<p>当一个人看透一切事物，跟植物人又有何区别。　　<p>当看透了，生命却变得乏味，无趣。<p>每个人都想要幸福，最后把自己弄的伤痕累累身心疲惫，这何必。<p>一个人试着去释怀并不是一件坏事，顺其自然是最好的。是自己的一辈子躲不掉，不属于自己的就算付出生命也不是自己的。强求的幸福，只是会一瞬间，当离去，才会懂得痛彻心扉。当一个人深爱爱你，你已经很幸福了，只是看你是否懂得珍惜。</p><p>当一个人珍惜你，你已经很幸福了，只是看你是否懂得这份珍惜。人常常在失去后，才懂得珍惜。自己把自己伤的遍体鳞伤，而不是时间，而不是现实。幸福时刻，一辈子难忘。当那份幸福远离，脑海出现那些曾经拥有的幸福，泪不停滑落，这是人一生最痛苦，最难忘的。幸福一瞬间，而痛苦却是一辈子。人的悲哀，全来自于自己，怪不得他人他事。</p>'},
                { id:'5', name: '书法家开好房间', date: '2019-09-10', count: '13', img: '../../images/15.jpg', content: '<p>p标签</p><img src="../../images/11.jpg"><img src="../../images/11.jpg"><img src="../../images/11.jpg">'},
                { id:'6', name: '飞机萨科', date: '2019-09-10', count: '33', img: '../../images/17.gif', content: '<p>p标签</p><img src="../../images/18.jpg"><img src="../../images/18.jpg"><img src="../../images/18.jpg">'},
                { id:'7', name: '复活节卡', date: '2019-09-10', count: '43', img: '../../images/19.gif', content: '<p>p标签</p><img src="../../images/20.jpg"><img src="../../images/20.jpg"><img src="../../images/20.jpg">'},
                { id:'8', name: '阿贾克斯发', date: '2019-09-10', count: '321', img: '../../images/5.jpg', content: '<p>p标签</p>'},
                { id:'9', name: '发哈尽快', date: '2019-09-10', count: '32', img: '../../images/6.jpg', content: '<p>p标签</p>'},
                { id:'10', name: '纺纱机', date: '2019-09-10', count: '331', img: '../../images/7.jpg', content: '<p>p标签</p>'},
                { id:'11', name: '纺纱机', date: '2019-09-10', count: '233', img: '../../images/8.jpg', content: '<p>p标签</p>'},
                { id:'12', name: '纺纱机', date: '2019-09-10', count: '313', img: '../../images/0.jpg', content: '<p>p标签</p>'},
            ]

            for(var i = 0;i<list.length;i++){
                if(list[i].id == this.id){
                    this.newsinfo = list[i]
                }
            }
            
        }
    },
    created(){
        this.getNewsInfo()
        this.getsltList()
    },
    components: { // 注册子组件
        'comment-box': comment

    }
}

</script>

<style lang="scss" >
.newsinfo-container{
    padding: 0 4px;
    .title{
        font-size: 16px;
        text-align: center;
        margin: 15px 0;
        color: #26A2FF;
    }
    .subtitle{
        font-size: 13px;
        display: flex;
        color: #ccc;//rgb(143,143,148);
        justify-content: space-between;
    }
    .content{
        img{  // 需要把 scoped 去掉
            width: 100%;
            height: 100%;
        }
    }

    .thumbs {
  /deep/ .my-gallery {
    display: flex;
    flex-wrap: wrap;
    figure {
      width: 30%;
      margin: 5px;
      img {
        width: 100%;
        margin: 10px;
        box-shadow: 0 0 8px #999;
      }
    }
  }
}
}
</style>